<template>
  <div class="testDiscrepancyContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="testDiscrepancyMain">
      <el-card style="background: black;">
        <div class="content">
          <div class="left">
            <el-form>
              <el-form-item label="" prop="content" label-width="5px" style="margin-bottom: 20px;">
                <el-input show-word-limit v-model="beautifyBeforeBefore" placeholder="请输入内容" type="textarea" />
              </el-form-item>
              <el-form-item label="" prop="content" label-width="5px">
                <el-input show-word-limit v-model="beautifyBeforeAfter" placeholder="请输入内容" type="textarea" />
              </el-form-item>
            </el-form>
          </div>
          <div class="main">
            <el-button type="warning" style="width: 80px;height: 40px;border-radius: 8px;margin-bottom: 15px;" @click="onturn">
              开始
            </el-button>
            <el-button type="danger" style="width: 80px;height: 40px;border-radius: 8px;margin-right: 10px;" @click="clean">
              清空
            </el-button>
          </div>
          <div class="right">
            <el-form>
              <el-form-item label="" prop="content" label-width="5px" v-if="beautifyAfter==''">
                <el-input show-word-limit v-model="beautifyAfter" placeholder="请输入内容后等待" type="textarea" disabled />
              </el-form-item>
              <el-form-item label="" prop="content" label-width="5px" v-else>
                <div style="width: 100%;height: 70vh;border: 1px solid #f8d447;box-sizing: border-box;padding: 20px;overflow-y: scroll;">
                  <span v-html="beautifyAfter"></span>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import * as Diff from 'diff';
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const beautifyBeforeBefore = ref<string>('')
const beautifyBeforeAfter = ref<string>('')
const beautifyAfter = ref<string>('')

const onturn = () => {
  // diffChars - 对两个文本进行字符级别的差异比较。
  // diffWords - 对两个文本进行单词级别的差异比较，忽略空白字符。
  // diffWordsWithSpace - 对两个文本进行单词级别的差异比较，考虑空白字符作为分隔符。
  // diffLines - 对两个文本按行进行差异比较。
  // diffSentences - 对两个文本按句子进行差异比较。
  // diffCss - 专门用于比较 CSS 代码的差异。
  // diffJson - 比较两个 JSON 对象的差异，首先将它们序列化为格式化的 JSON 文本，然后逐行比较。
  // diffArrays - 比较两个数组，检查数组元素的严格等同性。
  // createTwoFilesPatch - 创建一个包含两个文件差异的补丁。
  // createPatch - 创建一个补丁，通常用于一个文件的前后变化。
  // applyPatch - 应用一个给定的补丁到源文本上。
  // applyPatches - 应用一个或多个补丁到相应的文件内容上。
  // parsePatch - 解析一个补丁字符串为结构化的数据。
  // reversePatch - 反转一个补丁，使得应用此补丁会撤销原始的更改。
  // convertChangesToXML - 将差异对象转换为 XML 格式。
  // convertChangesToDMP - 将差异对象转换为 Google 的 diff-match-patch 库的格式。


  beautifyAfter.value = ''
  // oldFileName: 旧文件的文件名。
  // newFileName: 新文件的文件名。
  // oldStr: 原始字符串值
  // newStr: 新的字符串值
  // oldHeader: 可选，允许在旧文件的头部添加额外的信息。
  // newHeader: 可选，用于在新文件的头部添加额外的信息。
  // options: 一个包含选项的对象，可以用来自定义补丁的生成方式：
  // context: 描述应该包含多少行上下文。设置为 Number.MAX_SAFE_INTEGER 或 Infinity 可以包含整个文件内容在一个块（hunk）中。
  // ignoreWhitespace: 与 diffLines 中的用法相同，用于忽略空白字符差异。默认为 false。
  // stripTrailingCr: 与 diffLines 中的用法相同，用于在执行差异比较之前去除所有尾随的回车符（\r）。这有助于在比较 UNIX 和 Windows 文本文件时得到有用的差异结果。默认为 false。
  // beautifyAfter.value =  Diff.createTwoFilesPatch("旧文件", "新文件", beautifyBeforeBefore.value, beautifyAfter.value);

  const oldStr = beautifyBeforeBefore.value
  const newStr = beautifyBeforeAfter.value
  const diff  =  Diff.diffChars(oldStr, newStr, { ignoreCase: false })
  console.log('diff', diff)
  diff.forEach((part: any) => {
    if (part.added) {
      part.value = "<span style='color:green;'>" + part.value + "</span>"
    } else if (part.removed) {
      part.value = "<span style='color:red;'>" + part.value + "</span>"
    } else {
      part.value = "<span style='color:grey;'>" + part.value + "</span>"
    }
    beautifyAfter.value += part.value
  });
  console.log('beautifyAfter.value', beautifyAfter.value)
}

const clean = () => {
  beautifyBeforeBefore.value = ''
  beautifyBeforeAfter.value = ''
  beautifyAfter.value = ''
}

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.testDiscrepancyContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .testDiscrepancyMain {
    margin-top: 20px;
    padding: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);

      .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;

        .left {
          flex: 2;
          padding: 5px;

          :deep(.el-textarea__inner) {
            width: 100%;
            height: 35vh;
            border-radius: 8px;
          }
        }

        .main {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .right {
          flex: 2;
          padding: 5px;

          :deep(.el-textarea__inner) {
            width: 100%;
            height: 70vh;
            border-radius: 8px;
            margin: 10px 0;
          }
        }
      }
    }
  }

}
</style>